<template>
	<div class="attention">
		<van-nav-bar title="我的关注" left-text="返回" left-arrow @click-left="ret()" class="nav" />
		<!-- <h1>{{hint}}</h1> -->
		<h1>{{head}}</h1>
    <div class="myAttention" v-for="list in mylist">
      <p class="forMyAttention">
        <span class="att">{{list.a_username}}</span>
        <span @click="adda(list)" class="icon-det"><van-icon name="add-o" size="20" class="icon-det"/>{{font}}</span>
      </p>
	  <hr>
    </div>
	</div>
</template>

<script>
  import {Toast} from 'vant';
  import axios from 'axios';
  var querystring = require('querystring');
	export default{
		name:'attention',
		data(){
			return{
				hint:'我的关注界面',
				font:'取消关注',
				mylist:[],
				mine:'',
				username:'',
				a_username:'',
				head:''
			}
		},
    created(){
			this.sel()
		},
		methods:{
			ret(){
				// this.$router.push({path:'Mine'});
				this.$router.go(-1)			//返回上一级
			},
			sel(){
				this.mylist=[]
				this.mine=JSON.parse(localStorage.getItem('data-mine'))
				var param={
					'username':this.mine.detail.username
				}
				param = querystring.stringify(param);
				axios.post(this.$api+'/Attention/selu',param).then((response)=>{
					// console.log('123'+response.data.detail)
					if(response.data.detail!=null){
						this.mylist=response.data.detail.reverse()
					}else{
						this.head="暂无关注"
					}
				}).catch((error)=>{
					console.log(error);
				})
			},
			adda(list){
				this.a_username=list.a_username;
				this.mine = JSON.parse(localStorage.getItem('data-mine'))
				console.log(this.mine.detail.username)
				console.log(this.a_username)
				var param={
				'username':this.mine.detail.username,
				'a_username':this.a_username
				}
				param=querystring.stringify(param)
				axios.post(this.$api+'/Attention/del',param).then((response)=>{
					if(response.data.success=true){
						Toast("取关成功")
						console.log('触发方法')
						console.log(response.data)
						this.sel();
					}else{
						Toast("取关失败");
					}
					
					// this.sel()
				}).catch((error)=>{
					console.log(error);
				});
			},
		}
	}
</script>

<style scoped>
.forMyAttention{
  height: 30px;
  width: auto;
  font-size: 15px;
  /* border: 1px solid #FFD01E; */
  vertical-align: middle;
  margin: 0px;
  text-align: center;
}
.att{
  text-align: left;
  display: inline-block;
  /* border: 1px solid #FFD01E; */
  margin-top: 5px;
  height: 40px;
  width: 80px;
}
.icon-det{
	margin-left: 40px;
	vertical-align: middle;
}
hr{
	background-color: #FAFAFA;
	border: 1px #FAFAFA solid;
	width: 300px;
}
</style>
